<template>
  <div class="testWarp">
    <div class="top">
      <div class="header">
        <img src="~@assets/userLayout.png" class="logo,des" alt="logo" width="235"/>
      </div>
      <div class="desc">{{ $t('OTAsystem') }}</div>
    </div>
    <div class="main">
      <a-form-model
        id="formLogin"
        class="user-layout-login"
        ref="formLogin"
        :model="form"
        :rules="rules"
      >
        <a-form-model-item prop="account">
          <a-input
            size="large"
            type="text"
            :placeholder="$t('pleaseUserName')"
            v-model="form.account"
            @keyup.enter="handleSubmit"
          >
            <a-icon
              slot="prefix"
              type="user"
              :style="{ color: 'rgba(0,0,0,.25)' }"
            />
          </a-input>
        </a-form-model-item>
        <a-form-model-item prop="password">
          <a-input
            size="large"
            type="password"
            autocomplete="false"
            :placeholder="$t('pleasePassword')"
            v-model="form.password"
            @keyup.enter="handleSubmit"
          >
            <a-icon
              slot="prefix"
              type="lock"
              :style="{ color: 'rgba(0,0,0,.25)' }"
            />
          </a-input>
        </a-form-model-item>
        <a-form-model-item prop="code">
          <div style="display: flex;width:100%">
            <a-input
              style="margin-right:12px;flex:1 0 0"
              size="large"
              v-model="form.code"
              @keyup.enter="handleSubmit"
            >
            </a-input>
            <!-- 验证码 -->
            <img @click="getPigCodeKey" :src="`data:image/png;base64,${imgCode}`">
          </div>
        </a-form-model-item>
        <a-form-model-item>
          <a-button
            size="large"
            type="primary"
            class="login-button"
            :loading="loginBtn"
            :disabled="loginBtn"
            @click="handleSubmit"
          >{{ $t('login') }}</a-button>
        </a-form-model-item>
      </a-form-model>
      <!--    <a-modal v-model:visible="visible" width="1000px">
            <p><b>尊敬的用户：<br>
              您好！非常感谢您对本系统的大力支持！<br>
              本系统由汽车事业群/产品规划及汽车新技术研究院负责设计、开发、维护、管理等技术层面工作。<br><br>

              若您需开通账户或密码错误问题，可联系规划院OTA相关开发人员：
              <br><br>
            </b></p>
            <div style="display: flex;justify-content: center;align-items: center;">
              <a-table
                :columns="bodyColumns"
                :data-source="dataSource"
                :row-key="dataSource.id"
                style="width: 700px"
                :pagination="false"
              >

              </a-table>
            </div>

            <template #title>
              <div>
                <div  style="background-color: #13c2c2;width: 100px" >
                  <i class="iconfont icon-mail" style="margin-left: 5px;color: white;"></i>
                  <span style="margin-left: 2px; color: white;">联系我们</span>
                </div>
              </div>
            </template>
            <template #footer>
              <a-button >关闭</a-button>
            </template>
          </a-modal>-->
    </div>
  </div>
</template>

<script>
  import md5 from 'md5'
  import {mapActions, mapMutations} from 'vuex'
  import {getCodeKey} from '@/api/login'
  import {ACCESS_TOKEN} from "@/store/mutationTypes";


  export default {
  data () {
    return {
      loginBtn: false,
      // login type: 0 email, 1 loginCode, 2 telephone
      loginType: 0,
      form: {},
      imgCode: '',
      codeKey: '',
      visible:false,
      rules: {
        account: [{ required: true, message: this.$t('pleaseUserName') }],
        password: [{ required: true, message: this.$t('pleasePassword') }],
        code: [{ required: true, message: this.$t('vericodeValid') }]
      },
      bodyColumns:[
        {
          title:'姓名',
          dataIndex:'name',
          width:'20%',
          align:'center'
        },

        {title:'工号',
          dataIndex:'account',
          width:'20%',
          align:'center'
        },
        {title:'邮箱',
          dataIndex:'email',
          width:'20%',
          align:'center'
        },
        {title:'电话',
          dataIndex:'phone',
          width:'20%',
          align:'center'
        }
      ],
      dataSource:[
        {id:0,name:'吴岱蔚',account:'5189977',email:'wu.daiwei1@byd.com',phone:'13751005156'},
        {id:1,name:'朱奇进',account:'5189977',email:'zhu.qijin@byd.com',phone:'13751005156'},
      ]
    }
  },
  beforeRouteEnter(to, from, next) {
    if (process.env.NODE_ENV !== 'development') {
      //非本地环境跳转sso
      sessionStorage.removeItem(ACCESS_TOKEN);
      location.href = process.env.VUE_APP_SSO_BASE_URL + "/idp/authCenter/authenticate?response_type=code&state=" +
        window.btoa(to.query.redirect || "/")
        + "&client_id=" + process.env.VUE_APP_SSO_CLIENT_ID + "&redirect_uri=" + process.env.VUE_APP_SSO_REDIRECT_BASE_URL;
    } else {
      next();
    }
  },
  mounted () {
    // 重置vuex保存的数据
    this.RESET_USER_STATE()
    this.RESET_APP_STATE()
    this.getPigCodeKey()
  },
  methods: {
    ...mapActions(['Login', 'initDictType']),
    ...mapMutations(['RESET_USER_STATE', 'RESET_APP_STATE']),
    // 提交登录
    handleSubmit () {
      // e.preventDefault()
      const {
        Login
      } = this

      this.loginBtn = true
      this.$refs.formLogin.validate(valid => {
        if (valid) {
          const loginParams = { ...this.form }
          loginParams.password = md5(this.form.password)
          loginParams.codeKey = this.codeKey
          Login(loginParams)
            .then(res => {
              this.loginSuccess(res)
            //   this.initDictType() // 获取字典
            })
            .finally(() => {
              this.loginBtn = false
            })
            .catch(() => {
              this.getPigCodeKey()
              this.form.code = ''
            })
        } else {
          setTimeout(() => {
            this.loginBtn = false
          }, 600)
        }
      })
    },
    // 登录成功后执行的操作
    loginSuccess () {
      if (this.$store.state.app.innerLoginVisible === true) {
        this.$message.success("登录成功，请重新加载/提交数据！");
        this.$store.commit('toggleInnerLogin', false);
        this.$store.dispatch('GetInfo');
        this.$refs.formLogin.resetFields();
        return;
      }
      if (this.$route.query && this.$route.query.redirect) {
        const redirectURL = this.$route.query.redirect;
        delete this.$route.query.redirect;
        this.$router.push({ path: redirectURL, query: this.$route.query }).catch(() => {});
      } else {
        this.$router.push({ path: '/' }).catch(() => {});
      }
    },
    getPigCodeKey () {
      getCodeKey().then(res => {
        this.imgCode = res.data.code
        this.codeKey = res.data.codeKey
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .testWarp {
    max-width: 440px;
    min-width: 340px;
    width: 80%;
    background: #fff;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.14);
    padding-bottom: 40px;
    padding-top: 40px;
    right: 10%;
    -webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    transform: translate(0%, -50%);

    .top {
      .header {
        text-align: center;
        .logo {
          height: 40px;
          vertical-align: top;
          border-style: none;
          &.des {
            height: 60px;
          }
        }
      }
      .desc {
        text-align: center;
        font-size: 2rem;
        margin: 26px 0;
      }
    }
    .main {
      width: 73%;
      margin: 0 auto;
    }
  }
  @media screen and (max-height: 650px) {
    .testWarp {
      .top {
        .header {
          .logo {
            height: 30px;
          }
        }
        .desc {
          margin: 14px 0;
        }
      }
    }
  }
.user-layout-login {
  .ant-form-item {
    margin-bottom: 20px;
      .ant-form-item-control {
        .ant-input-lg {
          font-size: 1.4rem;
        }
      }
  }

  .ant-form-item:nth-child(4) {
    margin-top: 33px;
    margin-bottom: 0;
  }

  button.login-button {
    font-size: 1.8rem;
    height: 50px;
    width: 100%;
    border-radius: 25px;
    background: linear-gradient(-90deg, rgba(80, 57, 251, 1) 0%, rgba(0, 141, 255, 1) 100%);
    box-shadow: 0px 8px 18px 0px rgba(0, 138, 255, 0.41);
  }
}

@media screen and (max-height: 650px) {
  .user-layout-login .ant-form-item {
    margin-bottom: 10px;
  }
}
.ant-table-thead > tr >th{
  color:white !important;
  background: black !important;
  text-align: center;
}

</style>
